<template>
	<view @click="getImage" :class="cssClass">
		<view v-if="!img">
			<view :class="{'crossPlus':cssClass === 'cross', 'crossFoodPlus':cssClass === 'food','crossLicensePlus':cssClass === 'License'}">
			</view>
			<view :class="{'crossText':cssClass === 'cross','crossFoodText':cssClass === 'food','crossLicenseText':cssClass === 'License'}">
				<text>
					{{tipText}}
				</text>
			</view>
		</view>
		<view v-else :style="'background-image: url('+img+')'" :class="{'crossImg':cssClass === 'cross','crossFoodImg':cssClass === 'food','crossLicenseImg':cssClass === 'License'}">
		</view>
	</view>
</template>

<script>
	import {
		uploadFile
	} from '@/utils/alioss.js'
	export default {
		props: {
			cssClass: String, // 样式类别
			tipText: String,
			imgType: Number, // 图片类别，如正反等1 为正， 2 为反
			imgPath: String,
		},
		computed: {
			img() {
				if (this.imgSrc) {
					return this.imgSrc
				} else {
					return this.imgPath
				}
			}
		},
		data() {
			return {
				imgSrc: '',
			};
		},
		methods: {
			getImage() {
				uni.chooseImage({
					count: 1, //默认9
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						console.log(res)
						this.imgSrc = res.tempFilePaths[0]
						uploadFile(this.imgSrc)
							.then(res => {
								console.log(res)
								this.$emit('getImageTempPaths', {
									img: res.data.url,
									type: this.imgType
								})
							})
							.catch(res => {
								console.log(res)
								uni.showToast({
									title: '图片上传失败'+JSON.stringify(res)
								}) 
							})
						// uni.getFileSystemManager().readFile({
						// 	filePath: res.tempFilePaths[0], //选择图片返回的相对路径
						// 	encoding: 'base64', //编码格式
						// 	success: readRes => { //成功的回调
								
							
						// 	}
						// })
					}
				});
			}
		},

	}
</script>

<style scoped>
	.cross {
		height: 318upx;
		width: 341.33upx;
		background-color: #FFFFFF;
		position: relative;
		border-radius: 15upx;
		box-shadow: 0 0 10upx 7upx rgba(179, 31, 31, 0.05);
	}

	.crossPlus {
		background-color: #ffc8c7;
		margin: auto;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 0;
		height: 0;
		position: absolute;
	}

	.crossPlus:before,
	.crossPlus:after {
		content: "";
		position: absolute;
		background: #ffc8c7;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.crossPlus:before {
		width: 108.66upx;
		height: 23.33upx;
	}

	.crossPlus:after {
		width: 23.33upx;
		height: 108.66upx;
	}

	.crossText {
		width: 100%;
		position: absolute;
		bottom: 0;
		text-align: center;
		font-size: 36upx;
		color: #b57979;
		padding: 13.33upx 0;
	}

	.crossImg {
		height: 318upx;
		width: 341.33upx;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}




	.food {
		height: 208upx;
		width: 208upx;
		background-color: #fdf5f3;
		position: relative;
		border-radius: 15upx;
		box-shadow: 0 0 20upx -10upx #b31f1f;
	}

	.crossFoodPlus {
		background-color: #ffc8c7;
		margin: auto;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 0;
		height: 0;
		position: absolute;
	}

	.crossFoodPlus:before,
	.crossFoodPlus:after {
		content: "";
		position: absolute;
		background: #ffc8c7;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.crossFoodPlus:before {
		width: 70upx;
		height: 15upx;
	}

	.crossFoodPlus:after {
		width: 15upx;
		height: 70upx;
	}

	.crossFoodText {
		width: 100%;
		position: absolute;
		bottom: 0;
		text-align: center;
		font-size: 24upx;
		color: #6f6f6f;
		padding: 13.33upx 0;
	}

	.crossFoodImg {
		height: 208upx;
		width: 208upx;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.comUpdata {
		height: 189.33upx !important;
		width: 342upx !important;
	}


	.License {
		height: 111.33upx;
		width: 158.66upx;
		background-color: #fdf5f3;
		position: relative;
		border-radius: 15upx;
		/* box-shadow: 0 0 20upx -10upx #b31f1f; */
		border:1px solid #eeeeee;
	}

	.crossLicensePlus {
		background-color: #ffc8c7;
		margin: auto;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 0;
		height: 0;
		position: absolute;
	}

	.crossLicensePlus:before,
	.crossLicensePlus:after {
		content: "";
		position: absolute;
		background: #ffc8c7;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.crossLicensePlus:before {
		width: 33.33upx;
		height: 7.33upx;
	}

	.crossLicensePlus:after {
		width: 7.33upx;
		height: 33.33upx;
	}

	.crossLicenseText {
		width: 100%;
		position: absolute;
		bottom: 0;
		text-align: center;
		font-size: 20upx;
		color: #6f6f6f;
		padding: 0;
	}

	.crossLicenseImg {
		height: 111.33upx;
		width: 158.66upx;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
</style>
